/**
 * 设置页面组件（无模态框，页面内直接调整并保存）
 */
const SettingsView = {
    name: 'SettingsView',
    data() {
        return {
            loading: false,
            saving: false,
            settings: {
                chat: { model: 'glm-4.5-flash', temperature: 0.7, max_tokens: 65536 },
                image: { model: 'cogview-3-flash', size: '1024x1024' },
                video: { model: 'cogvideox-flash', quality: 'quality', with_audio: true, size: '1920x1080', fps: 30 },
                tts: { model: 'cogtts', voice: 'tongtong', response_format: 'wav' }
            },
            // 模型选项（后端默认配置的模型标注为免费）
            priceOptions: {
                chat: [
                    { value: 'glm-4.6', label: 'GLM-4.6', price: '' },
                    { value: 'glm-4.5', label: 'GLM-4.5', price: '' },
                    { value: 'glm-4.5-air', label: 'GLM-4.5-Air', price: '' },
                    { value: 'glm-4.5-x', label: 'GLM-4.5-X', price: '' },
                    { value: 'glm-4.5-airx', label: 'GLM-4.5-AirX', price: '' },
                    { value: 'glm-4.5-flash', label: 'GLM-4.5-Flash', price: '免费' },
                    { value: 'glm-4-plus', label: 'GLM-4-Plus', price: '' },
                    { value: 'glm-4-air-250414', label: 'GLM-4-Air-250414', price: '' },
                    { value: 'glm-4-airx', label: 'GLM-4-AirX', price: '' },
                    { value: 'glm-4-flashx', label: 'GLM-4-FlashX', price: '' },
                    { value: 'glm-4-flashx-250414', label: 'GLM-4-FlashX-250414', price: '' }
                ],
                image: [
                    { value: 'cogview-4-250304', label: 'CogView-4-250304', price: '' },
                    { value: 'cogview-4', label: 'CogView-4 (参考价: 0.06/次)', price: '' },
                    { value: 'cogview-3-flash', label: 'CogView-3-Flash', price: '免费' }
                ],
                video: [
                    { value: 'cogvideox-flash', label: 'CogVideoX-Flash', price: '免费' },
                    { value: 'CogVideoX-3', label: 'CogVideoX-3 (参考价: 1元/次)', price: '' },
                    { value: 'CogVideoX-2', label: 'CogVideoX-2 (参考价: 0.5元/次)', price: '' },
                    { value: 'Vidu Q1', label: 'Vidu Q1 (参考价: 2.5元/次)', price: '' },
                    { value: 'Vidu 2', label: 'Vidu 2 (参考价: 1.25元/次)', price: '' }
                ],
                tts: [
                    { value: 'cogtts', label: 'CogTTS', price: '' }
                ],
                // 语音音色（来自你的清单）
                ttsVoices: [
                    { value: 'tongtong', label: '彤彤（默认）' },
                    { value: 'chuichui', label: '锤锤' },
                    { value: 'xiaochen', label: '小陈' },
                    { value: 'jam', label: '动动动物圈 jam' },
                    { value: 'kazi', label: '动动动物圈 kazi' },
                    { value: 'douji', label: '动动动物圈 douji' },
                    { value: 'luodo', label: '动动动物圈 luodo' }
                ],
                imageSizes: [
                    { value: '1024x1024', label: '1024x1024' },
                    { value: '1024x768', label: '1024x768' },
                    { value: '768x1024', label: '768x1024' }
                ],
                videoQualities: [
                    { value: 'quality', label: '高质量' },
                    { value: 'standard', label: '标准' },
                    { value: 'fast', label: '快速' }
                ],
                videoSizes: [
                    { value: '1920x1080', label: '1920x1080' },
                    { value: '1280x720', label: '1280x720' },
                    { value: '1024x576', label: '1024x576' }
                ],
                ttsFormats: [
                    { value: 'wav', label: 'WAV' },
                    { value: 'mp3', label: 'MP3' },
                    { value: 'pcm', label: 'PCM' }
                ]
            }
        };
    },
    mounted() {
        this.loadSettings();
    },
    methods: {
        async loadSettings() {
            this.loading = true;
            try {
                const response = await apiClient.getSettings();
                if (response.success && response.data) {
                    this.settings = { ...this.settings, ...response.data };
                }
            } catch (e) {
                console.error('加载设置失败:', e);
                this.$message.error('加载设置失败');
            } finally {
                this.loading = false;
            }
        },
        async saveSettings() {
            this.saving = true;
            try {
                const response = await apiClient.saveAllSettings(this.settings);
                if (response.success) {
                    this.$message.success('设置已保存');
                    this.$emit('settings-updated', this.settings);
                } else {
                    this.$message.error('保存设置失败');
                }
            } catch (e) {
                console.error('保存设置失败:', e);
                this.$message.error('保存设置失败');
            } finally {
                this.saving = false;
            }
        },
        resetToDefault() {
                this.settings = {
                chat: { model: 'glm-4.5-flash', temperature: 0.7, max_tokens: 65536 },
                image: { model: 'cogview-3-flash', size: '1024x1024' },
                video: { model: 'cogvideox-flash', quality: 'quality', with_audio: true, size: '1920x1080', fps: 30 },
                tts: { model: 'cogtts', voice: 'tongtong', response_format: 'wav' }
            };
            this.$message.success('已恢复默认设置，请点击保存生效');
        }
    },
    template: `
        <el-card shadow="hover" style="margin: 20px;">
            <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <span style="font-size: 18px; font-weight: 600;">模型与参数设置</span>
                </div>
                <div>
                    <el-button @click="resetToDefault" :disabled="loading || saving">恢复默认</el-button>
                    <el-button type="primary" @click="saveSettings" :loading="saving" :disabled="loading">保存设置</el-button>
                </div>
            </div>

            <div v-loading="loading">
                <!-- 对话设置 -->
                <el-card shadow="never" style="margin-bottom: 16px;">
                    <div slot="header"><strong>智能对话</strong></div>
                    <el-form label-width="120px" size="small">
                        <el-form-item label="模型">
                            <el-select v-model="settings.chat.model" placeholder="选择模型">
                                <el-option
                                    v-for="opt in priceOptions.chat"
                                    :key="opt.value"
                                    :label="opt.price ? opt.label + ' - ' + opt.price : opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="温度">
                            <el-slider v-model="settings.chat.temperature" :min="0" :max="1" :step="0.05" style="width: 60%;"></el-slider>
                        </el-form-item>
                        <el-form-item label="最大Token数">
                            <el-input-number v-model="settings.chat.max_tokens" :min="1" :max="65536"></el-input-number>
                        </el-form-item>
                    </el-form>
                </el-card>

                <!-- 图片设置 -->
                <el-card shadow="never" style="margin-bottom: 16px;">
                    <div slot="header"><strong>生成图片</strong></div>
                    <el-form label-width="120px" size="small">
                        <el-form-item label="模型">
                            <el-select v-model="settings.image.model">
                                <el-option
                                    v-for="opt in priceOptions.image"
                                    :key="opt.value"
                                    :label="opt.price ? opt.label + ' - ' + opt.price : opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="尺寸">
                            <el-select v-model="settings.image.size">
                                <el-option
                                    v-for="opt in priceOptions.imageSizes"
                                    :key="opt.value"
                                    :label="opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>

                <!-- 视频设置 -->
                <el-card shadow="never" style="margin-bottom: 16px;">
                    <div slot="header"><strong>生成视频</strong></div>
                    <el-form label-width="120px" size="small">
                        <el-form-item label="模型">
                            <el-select v-model="settings.video.model">
                                <el-option
                                    v-for="opt in priceOptions.video"
                                    :key="opt.value"
                                    :label="opt.price ? opt.label + ' - ' + opt.price : opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="质量">
                            <el-select v-model="settings.video.quality">
                                <el-option
                                    v-for="opt in priceOptions.videoQualities"
                                    :key="opt.value"
                                    :label="opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="尺寸">
                            <el-select v-model="settings.video.size">
                                <el-option
                                    v-for="opt in priceOptions.videoSizes"
                                    :key="opt.value"
                                    :label="opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="帧率">
                            <el-input-number v-model="settings.video.fps" :min="15" :max="60"></el-input-number>
                        </el-form-item>
                        <el-form-item label="包含音频">
                            <el-switch v-model="settings.video.with_audio"></el-switch>
                        </el-form-item>
                    </el-form>
                </el-card>

                

                <!-- 文字转语音 -->
                <el-card shadow="never">
                    <div slot="header"><strong>文字转语音</strong></div>
                    <el-form label-width="120px" size="small">
                        <el-form-item label="模型">
                            <el-select v-model="settings.tts.model">
                                <el-option
                                    v-for="opt in priceOptions.tts"
                                    :key="opt.value"
                                    :label="opt.price ? opt.label + ' - ' + opt.price : opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="音色">
                            <el-select v-model="settings.tts.voice">
                                <el-option
                                    v-for="opt in priceOptions.ttsVoices"
                                    :key="opt.value"
                                    :label="opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="格式">
                            <el-select v-model="settings.tts.response_format">
                                <el-option
                                    v-for="opt in priceOptions.ttsFormats"
                                    :key="opt.value"
                                    :label="opt.label"
                                    :value="opt.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>
                            </div>
        </el-card>
    `
};
